<style lang="less">
// @import "../../../styles/tree&table-common.less";
// @import "./dictManage.less";
@import '../../../styles/table-common.less';
@import '../../personInfo.less';

.ivu-card-head {
    background: #378cfe;
    padding: 15px !important;

    .head-name {
        color: #fff;
    }

    .ivu-dropdown {
        a {
            color: #fff;
        }

        .light-text {
            color: #378cfe;
            border: none !important;
        }
    }
}
</style>
<style lang="less" scoped>
.wrapper04 {
    margin-top: 20px;
    height: 78%;
    position: relative; 
    overflow-y: auto;
}
.icon01 {
    background: rgb(45, 154, 244); border-radius: 50%; padding: 3px
}
.wrapper02 {
    position: absolute; right: 15px; display: inline-block
}
.cmr16{
    margin-right: 16px
}
.cmr10 {
    margin-right: 10px
}
.cml-35 {
    margin-left: -35px
}
.c-drawer01 {
    /deep/ .ivu-drawer {
        width:1000px !important;
    }
}
.cml8{
    margin-left: 8px
}
@media (max-width: 1920px) {
    /deep/ .ivu-table .ivu-table-fixed-right{
        height: 98% !important;
    }
    /deep/ .ivu-table .ivu-table-fixed-right  .ivu-table-fixed-body {
        height: 94% !important;
    }
        
}
</style>
<template>
    <div class="search">
        <!--      <div slot="title">-->
        <!--        <div class="edit-head">-->

        <!--          <div class="head-name" style="text-align: center; flex-grow: 1; font-weight: bold; font-size: 1.4em;">-->
        <!--            {{ currVersion }}字典版本库-->
        <!--          </div>-->
        <!--          <Dropdown @on-click="versDropdown">-->
        <!--            <a href="javascript:void(0)">-->
        <!--              切换版本-->
        <!--              <Icon type="ios-arrow-down"></Icon>-->
        <!--            </a>-->
        <!--            <template #list>-->
        <!--              <DropdownMenu>-->
        <!--                <DropdownItem name="addVers" class="light-text">添加版本库</DropdownItem>-->
        <!--                <DropdownItem :name="option" v-for="option in versionList">{{ option }}版</DropdownItem>-->
        <!--              </DropdownMenu>-->
        <!--            </template>-->
        <!--          </Dropdown>-->
        <!--        </div>-->
        <!--      </div>-->

        <Row class="all-height" :gutter="16">
            <Col v-if="expand" span="5" style="height: 100%">
                <Card class="all-height card-child-height" style="height: 100%">
                    <Row class="operation">
                        <Button v-has="'add'" @click="addDcit" type="primary" icon="md-add">添加字典</Button>
                        <Dropdown @on-click="handleDropdown">
                            <Button>
                                更多操作
                                <Icon type="md-arrow-dropdown" />
                            </Button>
                            <DropdownMenu slot="list">
                                <DropdownItem v-has="'edit'" name="editDcit">编辑字典</DropdownItem>
                                <DropdownItem v-has="'delete'" name="delDcit">删除字典</DropdownItem>
                                <DropdownItem name="refreshDcit">刷新</DropdownItem>
                            </DropdownMenu>
                        </Dropdown>
                    </Row>
                    <Alert show-icon>
                        当前选择：
                        <span class="select-title">{{ editTitle }}</span>
                        <a class="select-clear" v-if="editTitle" @click="cancelEdit">取消选择</a>
                    </Alert>
                    <Input v-model="searchKey" suffix="ios-search" @on-change="search" placeholder="输入搜索字典" clearable />
                    <div class="wrapper04">
                        <div class="tree-bar" :style="{ maxHeight: maxHeight }">
                            <Tree ref="tree" :data="treeData" @on-select-change="selectTree"></Tree>
                        </div>
                        <Spin size="large" fix v-if="treeLoading"></Spin>
                    </div>
                </Card>
            </Col>
            <Col :span="middle" class="all-height">
                <Card class="all-height card-child-height">
                    <Row class="operation code-row-bg" style="display: flex; justify-content: space-between">
                        <Col span="2" style="text-align: left">
                            <Icon
                                :type="expand ? `ios-arrow-back` : `ios-arrow-forward`"
                                color="#fff"
                                class="icon01"
                                @click.native="clickShowRight1"
                            />
                        </Col>
                        <Col span="20">
                            <Button v-has="'add'" @click="add" type="primary" icon="md-add">添加数据</Button>
                            <Button v-has="'delete'" @click="delAll" icon="md-trash">批量删除</Button>
                            <Button @click="getDataList" icon="md-refresh">刷新数据</Button>
                            <Button v-has="'input'" @click="dropImportData">导入数据</Button>
                            <!--                    <Button type="dashed" @click="openSearch = !openSearch">{{-->
                            <!--                        openSearch ? "关闭搜索" : "开启搜索"-->
                            <!--                      }}</Button>-->
                            <Button type="dashed" @click="openTip = !openTip">{{ openTip ? '关闭提示' : '开启提示' }}</Button>
                        </Col>
                        <Col span="2" style="text-align: right">
                            <Icon
                                color="#fff"
                                class="icon01"
                                :type="showRight ? `ios-arrow-forward` : `ios-arrow-back`"
                                @click.native="clickShowRight"
                            ></Icon>

                            <!--              <Button :icon="showRight?`ios-arrow-forward`:`ios-arrow-back`"-->
                            <!--                      @click.native="clickShowRight"-->
                            <!--                      type="primary">-->
                            <!--              </Button>-->
                        </Col>
                    </Row>
                    <Row v-show="openTip">
                        <Alert show-icon>
                            已选择
                            <span class="select-count">{{ selectList.length }}</span>
                            项
                            <a class="select-clear" @click="clearSelectAll">清空</a>
                        </Alert>
                    </Row>
                    <Row class="calc-px-height">
                        <Table
                            :height="height1"
                            :loading="loading"
                            border
                            :columns="columns"
                            :data="data"
                            sortable="custom"
                            @on-sort-change="changeSort"
                            @on-selection-change="showSelect"
                            @on-row-dblclick="sjclaib"
                            ref="table"
                        ></Table>
                    </Row>
                    <Row type="flex" justify="end" class="page">
                        <Page
                            :current="searchForm.pageNumber"
                            :total="total"
                            :page-size="searchForm.pageSize"
                            @on-change="changePage"
                            @on-page-size-change="changePageSize"
                            :page-size-opts="[10, 20, 50, 100, 200]"
                            size="small"
                            show-total
                            show-elevator
                            show-sizer
                        ></Page>
                    </Row>
                </Card>
            </Col>
            <Col span="6" class="all-height" v-if="showRight">
                <Card class="all-height card-child-height">
                    <Row v-show="dictModalVisible === false && modalVisible === false" @keydown.enter.native="handleSearch">
                        <Col span="24">
                            <div class="drawer-header">
                                <div class="cmr16" >查询区</div>
                            </div>
                        </Col>
                        <Col span="24">
                            <Form ref="searchForm" :model="searchForm" :label-width="labelWidth70">
                                <FormItem label="数据名称" prop="title">
                                    <Input type="text" v-model="searchForm.title" placeholder="请输入" clearable style="width: 100%" />
                                </FormItem>
                                <FormItem label="状态" prop="status">
                                    <Select v-model="searchForm.status" placeholder="请选择" clearable style="width: 100%">
                                        <Option value="0">正常</Option>
                                        <Option value="-1">禁用</Option>
                                    </Select>
                                </FormItem>
                                <FormItem   class="br ">
                                    <Button @click="handleSearch" type="primary" icon="ios-search">搜索</Button>
                                    <Button @click="handleReset">重置</Button>
                                </FormItem>
                            </Form>
                        </Col>
                    </Row>
                    <Row v-show="dictModalVisible" style="flex-direction: column">
                        <div class="drawer-header">
                            <div class="cmr16">{{ dictModalTitle }}</div>
                        </div>
                        <Form ref="dictForm" :model="dictForm" :label-width="labelWidth85" :rules="dictFormValidate">
                            <FormItem label="字典名称" prop="title">
                                <Input v-model="dictForm.title" />
                            </FormItem>
                            <FormItem label="字典类型" prop="type" class="block-tool">
                                <Tooltip placement="right" :max-width="220" transfer content="建议英文名且需唯一 非开发人员谨慎修改">
                                    <Input v-model="dictForm.type" />
                                </Tooltip>
                            </FormItem>
                            <FormItem label="备注" prop="description">
                                <Input v-model="dictForm.description" />
                            </FormItem>
                            <FormItem v-hasRole="'ROLE_ADMIN'" label="是否对用户开放" prop="grade">
                                <Select v-model="dictForm.grade">
                                    <Option value="1">是</Option>
                                    <Option value="0">否</Option>
                                </Select>
                            </FormItem>
                            <FormItem label="排序值" prop="sortOrder">
                                <Tooltip trigger="hover" placement="right" content="值越小越靠前，支持小数">
                                    <InputNumber :max="1000" :min="0" v-model="dictForm.sortOrder"></InputNumber>
                                </Tooltip>
                            </FormItem>
                        </Form>
                        <div class="br right-bottom-edit">
                            <Button type="text" @click="dictModalVisible = false">取消</Button>
                            <!--                    <Button type="primary" :loading="submitLoading" @click="handelSubmitDict">提交</Button>-->
                            <div v-if="modalType == 0" style="display: inline">
                                <Button v-has="'add'" type="primary" :loading="submitLoading" @click="handelSubmitDict">提交</Button>
                            </div>
                            <div v-if="modalType == 1" style="display: inline">
                                <Button v-has="'edit'" type="primary" :loading="submitLoading" @click="handelSubmitDict">提交</Button>
                            </div>
                        </div>
                    </Row>
                    <Row v-show="modalVisible">
                        <div class="drawer-header">
                            <div class="cmr16">{{ modalTitle }}</div>
                        </div>
                        <Form ref="form" :model="form" :label-width="labelWidth80" :rules="formValidate">
                            <FormItem label="名称" prop="title">
                                <Input v-model="form.title" />
                            </FormItem>
                            <FormItem label="数据值" prop="value">
                                <Input v-model="form.value" />
                            </FormItem>
                            <FormItem label="备注" prop="description">
                                <Input v-model="form.description" />
                            </FormItem>
                            <FormItem label="排序值" prop="sortOrder">
                                <Tooltip trigger="hover" placement="right" content="值越小越靠前，支持小数">
                                    <InputNumber :max="1000" :min="0" v-model="form.sortOrder"></InputNumber>
                                </Tooltip>
                            </FormItem>
                            <FormItem label="是否启用" prop="status">
                                <i-switch size="large" v-model="form.status" :true-value="0" :false-value="-1">
                                    <span slot="open">启用</span>
                                    <span slot="close">禁用</span>
                                </i-switch>
                            </FormItem>
                        </Form>
                        <div class="br right-bottom-edit">
                            <Button type="text" @click="modalVisible = false">取消</Button>
                            <div v-if="modalType == 0" style="display: inline">
                                <Button v-has="'add'" type="primary" :loading="submitLoading" @click="handelSubmit">提交</Button>
                            </div>
                            <div v-if="modalType == 1" style="display: inline">
                                <Button v-has="'edit'" type="primary" :loading="submitLoading" @click="handelSubmit">提交</Button>
                            </div>
                        </div>
                    </Row>
                </Card>
            </Col>
        </Row>

        <Drawer title="导入数据" closable v-model="importModalVisible" class="c-drawer01" >
            <div style="display: flex; justify-content: space-between; align-items: center">
                <Upload action :before-upload="beforeUploadImport" accept=".xls, .xlsx">
                    <Button :loading="reading" icon="ios-cloud-upload-outline" class="cmr10">上传Excel文件</Button>
                    <span v-if="uploadfile.name">当前选择文件：{{ uploadfile.name }}</span>
                </Upload>
                <Button @click="clearImportData" icon="md-trash">清空数据</Button>
            </div>
            <Alert type="warning" show-icon>导入前请下载查看导入模版数据文件查看所需字段及说明，确保数据格式正确，不得修改列英文名称</Alert>
            <Table :columns="importColumns" border :height="height" :data="importTableData" ref="importTable"></Table>
            <div class="drawer-footer">
                <Button @click="downloadTemple" type="info">下载导入模板</Button>
                <div class="wrapper02">
                    <Button @click="importModalVisible = false">关闭</Button>
                    <Button :loading="importLoading" :disabled="importTableData.length <= 0" @click="importData" class="cml8" type="primary">
                        确认导入
                        <span v-if="importTableData.length > 0">{{ importTableData.length }} 条数据</span>
                    </Button>
                </div>
            </div>
        </Drawer>
    </div>
</template>

<script>
import { getAllDictList, addDict, editDict, deleteDict, searchDict, getAllDictDataList, addDictData, editDictData, deleteData, importUserData, importDictData, getVersionList } from '@/api/index';
import { dictColumns, dictData } from './importDictDataTemplate';
import { userColumns, userData } from '@/views/sys/user-manage/importTemplate';
import excel from '@/libs/excel';

export default {
    name: 'dic-manage',
    data() {
        return {
            labelWidth70: 70,
            labelWidth80: 80,
            labelWidth85: 85,
            currVersion: '',
            versionList: [],
            openSearch: true,
            openTip: true,
            treeLoading: false, // 树加载状态
            maxHeight: '500px',
            loading: false, // 表格加载状态
            editTitle: '', // 编辑节点名称
            searchKey: '', // 搜索树
            span: 18,
            expandIcon: 'ios-arrow-back',
            selectNode: {},
            treeData: [], // 树数据
            selectList: [], // 多选数据
            height1: 0,
            searchForm: {
                // 搜索框对应data对象
                name: '',
                status: '',
                version: '',
                pageNumber: 1, // 当前页数
                pageSize: 50, // 页面大小
                sort: 'sortOrder', // 默认排序字段
                order: 'asc' // 默认排序方式
            },
            modalType: 0, // 添加或编辑标识
            modalVisible: false, // 添加或编辑显示
            dictModalVisible: false,
            importModalVisible: false,
            reading: false,
            uploadfile: {
                name: ''
            },
            importTableData: [],
            importColumns: [],
            height: 510,
            tempColumns: userColumns,
            tempData: userData,
            dictModalTitle: '',
            modalTitle: '', // 添加或编辑标题
            dictForm: {
                title: '',
                type: '',
                description: '',
                grade: '1',
                sortOrder: 0,
                version: ''
            },
            form: {
                // 添加或编辑表单对象初始化数据
                title: '',
                value: '',
                status: 0,
                description: '',
                sortOrder: 0,
                version: ''
            },
            dictFormValidate: {
                // 表单验证规则
                title: [{ required: true, message: '不能为空', trigger: 'change' }],
                type: [{ required: true, message: '不能为空', trigger: 'change' }],
                // grade: [{required: true, message: "不能为空", trigger: "change"}],
                sortOrder: [
                    {
                        required: true,
                        type: 'number',
                        message: '排序值不能为空',
                        trigger: 'change'
                    }
                ]
            },
            formValidate: {
                // 表单验证规则
                title: [{ required: true, message: '不能为空', trigger: 'change' }],
                value: [{ required: true, message: '不能为空', trigger: 'change' }],
                sortOrder: [
                    {
                        required: true,
                        type: 'number',
                        message: '排序值不能为空',
                        trigger: 'change'
                    }
                ]
            },
            columns: [],
            columns_1: [
                // 表头
                {
                    type: 'selection',
                    minWidth: 60,
                    align: 'center'
                },
                {
                    type: 'index',
                    title: '序号',
                    minWidth: 60,
                    align: 'center'
                },
                {
                    title: '名称',
                    key: 'title',
                    minWidth: 160,
                    sortable: true
                },
                {
                    title: '数据值',
                    key: 'value',
                    minWidth: 120,
                    sortable: true
                },
                {
                    title: '备注',
                    key: 'description',
                    minWidth: 120,
                    sortable: true
                },
                {
                    title: '排序值',
                    key: 'sortOrder',
                    minWidth: 100,
                    align: 'center',
                    sortable: true,
                    sortType: 'asc'
                },
                {
                    title: '状态',
                    key: 'status',
                    align: 'center',
                    minWidth: 100,
                    render: (h, params) => {
                        let re = '';
                        if (params.row.status == 0) {
                            return h('div', [
                                h('Badge', {
                                    props: {
                                        status: 'success',
                                        text: '启用'
                                    }
                                })
                            ]);
                        } else if (params.row.status == -1) {
                            return h('div', [
                                h('Badge', {
                                    props: {
                                        status: 'error',
                                        text: '禁用'
                                    }
                                })
                            ]);
                        }
                    }
                },
                {
                    title: '创建时间',
                    key: 'createTime',
                    minWidth: 160,
                    sortable: true
                },
                {
                    title: '操作',
                    key: 'action',
                    minWidth: 120,
                    align: 'center',
                    fixed: 'right',
                    render: (h, params) => {
                        return h('div', [
                            h(
                                'a',
                                {
                                    style: {
                                        display: this.hasPermission(this, 'edit') ? 'inline-block' : 'none'
                                    },
                                    on: {
                                        click: () => {
                                            this.sjclaib(params.row);
                                        }
                                    }
                                },
                                '编辑'
                            ),
                            h('Divider', {
                                props: {
                                    type: 'vertical'
                                }
                            }),
                            h(
                                'a',
                                {
                                    style: {
                                        display: this.hasPermission(this, 'delete') ? 'inline-block' : 'none'
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params.row);
                                        }
                                    }
                                },
                                '删除'
                            )
                        ]);
                    }
                }
            ],
            submitLoading: false, // 添加或编辑提交状态
            data: [], //表单数据
            total: 0, // 表单数据总数
            showRight: true,
            middle: 13,
            expand: true
        };
    },
    methods: {
        tableheig() {
            var bbb = document.getElementsByClassName('calc-px-height')[0].scrollHeight;
            var aaa = document.getElementsByClassName('calc-px-height')[0].children[0].children[0].children[1];
            var ccc = document.getElementsByClassName('calc-px-height')[0].children[0].children[0].children[0].scrollHeight;
            var ddd = bbb - ccc;
            aaa.style.height = `${ddd}px`;

            if (this.searchForm.pageSize === 10) {
                this.height1 = 0;
            } else {
                this.height1 = document.getElementsByClassName('calc-px-height')[0].scrollHeight;
                if (this.total < this.searchForm.pageNumber * this.searchForm.pageSize) {
                    var r = (this.searchForm.pageNumber - 1) * this.searchForm.pageSize;
                    var a = this.total - r;
                    var s = a * 43 + 65;
                    if (s < this.height1) {
                        this.height1 = 0;
                    }
                }
            }
            if (this.total < 10) {
                this.height1 = 0;
            }
        },
        shoufang() {
            if (this.expand === false) {
                this.middle = 18;
                if (this.showRight === false) {
                    this.middle = 24;
                }
            } else {
                this.middle = 13;
                if (this.showRight === false) {
                    this.middle = 19;
                }
            }
        },
        init() {
            // 获取树数据
            this.getAllDict();
            // 获取表单数据
            this.getDataList();
            this.getVersionListInit();
        },
        clickShowRight1() {
            this.expand = !this.expand;
            this.shoufang();
        },
        // 显示隐藏右侧区域
        clickShowRight() {
            this.showRight = !this.showRight;
            this.shoufang();
        },
        getAllDict(vers) {
            this.treeLoading = true;
            getAllDictList({ version: vers }).then(res => {
                this.treeLoading = false;
                if (res.success) {
                    // this.treeData = res.result;
                    this.treeData = this.returnTreeData(res.result);
                }
            });
        },
        // 隐藏基础代码左侧，不让看到的数据
        returnTreeData(result) {
            let returnData = [];
            for (let i = 0; i < result.length; i++) {
                if (result[i].title === '去向分类' || result[i].title === '学历层次') {
                    continue;
                } else {
                    returnData.push(result[i]);
                }
            }
            return returnData;
        },
        beforeUploadImport(file) {
            this.uploadfile = file;
            const fileExt = file.name.split('.').pop().toLocaleLowerCase();
            if (fileExt == 'xlsx' || fileExt == 'xls') {
                this.readFile(file);
                this.file = file;
            } else {
                this.$Notice.warning({
                    title: '文件类型错误',
                    desc: '所选文件‘ ' + file.name + ' ’不是EXCEL文件，请选择后缀为.xlsx或者.xls的EXCEL文件。'
                });
            }
            return false;
        },
        // 读取文件
        readFile(file) {
            this.reading = true;
            const reader = new FileReader();
            reader.readAsArrayBuffer(file);
            reader.onerror = e => {
                this.reading = false;
                // this.$Message.error("文件读取出错");
                this.$Message.error({
                    content: '文件读取出错',
                    duration: 5,
                    closable: true
                });
            };
            reader.onload = e => {
                const data = e.target.result;
                const { header, results } = excel.read(data, 'array');
                const tableTitle = header.map(item => {
                    return { title: item, key: item, minWidth: 130, align: 'center' };
                });
                this.importTableData = results;
                this.importColumns = tableTitle;
                this.reading = false;
                this.$Message.success('读取数据成功');
            };
        },
        clearImportData() {
            this.importTableData = [];
            this.importColumns = [];
            this.uploadfile = {};
        },
        downloadTemple() {
            let title = [];
            let key = [];
            dictColumns.forEach(e => {
                title.push(e.title);
                key.push(e.key);
            });
            const params = {
                title: title,
                key: key,
                data: dictData,
                autoWidth: true,
                filename: '导入字典数据模版'
            };
            excel.export_array_to_excel(params);
            // window.location.href = process.env.BASE_URL + "字典导入模板.xlsx";
        },
        importData() {
            let params = this.importTableData.map(item => {
                return {
                    title: item['数据名称'],
                    value: item['数据值'],
                    sortOrder: item['排序值'],
                    status: item['是否启用'],
                    description: item['注释'],
                    dictId: this.selectNode.id
                };
            });
            this.importLoading = true;
            importDictData(params).then(res => {
                this.importLoading = false;
                if (res.success) {
                    this.importModalVisible = false;
                    this.getDataList();
                    this.$Modal.info({
                        title: '导入结果',
                        content: res.message
                    });
                }
            });
        },
        search() {
            // 搜索树
            if (this.searchKey) {
                this.treeLoading = true;
                searchDict({ key: this.searchKey, version: this.currVersion }).then(res => {
                    this.treeLoading = false;
                    if (res.success) {
                        this.treeData = this.returnTreeData(res.result);
                    }
                });
            } else {
                // 为空重新加载
                this.getAllDict();
            }
        },
        selectTree(v) {
            if (v.length > 0) {
                this.$refs.dictForm.resetFields();
                // 转换null为""
                for (let attr in v[0]) {
                    if (v[0][attr] == null) {
                        v[0][attr] = '';
                    }
                }
                let str = JSON.stringify(v[0]);
                let data = JSON.parse(str);
                this.selectNode = data;
                this.dictForm = data;
                this.editTitle = data.title + '(' + data.type + ')';
                // 重新加载表
                this.searchForm.pageNumber = 1;
                this.searchForm.pageSize = 50;
                this.getDataList();
            } else {
                this.cancelEdit();
            }
        },
        cancelEdit() {
            let data = this.$refs.tree.getSelectedNodes()[0];
            if (data) {
                data.selected = false;
            }
            // 取消选择后获取全部数据
            this.selectNode = {};
            this.editTitle = '';
            this.getDataList();
        },
        changeSelect(v) {
            this.selectList = v;
        },
        // changeExpand() {
        //   this.expand = !this.expand;
        //   if (this.expand) {
        //     this.expandIcon = "ios-arrow-back";
        //     this.span = 18;
        //   } else {
        //     this.expandIcon = "ios-arrow-forward";
        //     this.span = 23;
        //   }
        // },
        changePage(v) {
            this.searchForm.pageNumber = v;
            this.getDataList();
            this.clearSelectAll();
        },
        changePageSize(v) {
            this.searchForm.pageSize = v;
            this.getDataList();
        },
        getDataList() {
            this.loading = true;
            if (this.selectNode.id) {
                this.searchForm.dictId = this.selectNode.id;
            } else {
                delete this.searchForm.dictId;
            }
            if (!this.searchForm.status) {
                this.searchForm.status = '';
            }
            // this.searchForm.version = this.currVersion;
            getAllDictDataList(this.searchForm).then(res => {
                this.loading = false;
                if (res.success) {
                    this.data = res.result.records;
                    this.total = res.result.total;
                    this.tableheig();
                    if (this.data.length == 0 && this.searchForm.pageNumber > 1) {
                        this.searchForm.pageNumber -= 1;
                        this.getDataList();
                    }
                }
            });
        },
        dropImportData() {
            if (!this.selectNode.id) {
                this.$Message.warning('请先选择左侧要导入的字典');
                return;
            }
            this.importModalVisible = true;
        },
        handleSearch() {
            this.searchForm.pageNumber = 1;
            this.searchForm.pageSize = 50;
            this.getDataList();
        },
        handleReset() {
            this.$refs.searchForm.resetFields();
            this.searchForm.pageNumber = 1;
            this.searchForm.pageSize = 50;
            // 重新加载数据
            this.getDataList();
        },
        changeSort(e) {
            this.searchForm.sort = e.key;
            this.searchForm.order = e.order;
            if (e.order == 'normal') {
                this.searchForm.order = '';
            }
            this.getDataList();
        },
        showSelect(e) {
            this.selectList = e;
        },
        clearSelectAll() {
            this.$refs.table.selectAll(false);
        },
        refreshDict() {
            this.getAllDict(this.currVersion);
            this.selectNode = {};
            this.editTitle = '';
            this.getDataList();
        },
        handleDropdown(name) {
            if (name == 'editDcit') {
                if (!this.selectNode.id) {
                    this.$Message.warning('您还未选择要编辑的字典');
                    return;
                }
                this.editDcit();
            } else if (name == 'delDcit') {
                this.delDcit();
            } else if (name == 'refreshDcit') {
                this.refreshDict();
            }
        },
        versDropdown(name) {
            if (name === 'addVers') {
                this.currVersion = parseInt(this.versionList[0]) + 1;
                const nextYear = new Date().getFullYear() + 1;
                if (parseInt(this.currVersion) > nextYear) {
                    this.currVersion = nextYear;
                }
                this.getAllDict(this.currVersion);
                this.$Message.warning('您只能添加' + (parseInt(this.versionList[0]) + 1) + '年的字典版本！');
            } else {
                this.currVersion = name;
                this.getAllDict(name);
            }
            this.searchForm.version = this.currVersion;
            this.getDataList();
        },
        addDcit() {
            this.modalType = 0;
            this.dictModalTitle = '添加字典';
            this.$refs.dictForm.resetFields();
            this.dictForm.grade = '1';
            this.dictForm.sortOrder = this.treeData.length + 1;
            this.dictForm.version = this.currVersion;
            this.cancelEdit();
            this.dictModalVisible = true;
            this.modalVisible = false;
        },
        editDcit() {
            this.modalType = 1;
            this.dictModalTitle = '编辑字典';
            this.dictModalVisible = true;
            this.modalVisible = false;
        },
        delDcit() {
            if (!this.selectNode.id) {
                this.$Message.warning('您还未选择要删除的字典');
                return;
            }
            this.$Modal.confirm({
                title: '确认删除',
                loading: true,
                content: '您确认要删除 ' + this.selectNode.title + ' ?',
                onOk: () => {
                    // 删除
                    deleteDict({ ids: this.selectNode.id }).then(res => {
                        this.$Modal.remove();
                        if (res.success) {
                            this.$Message.success('操作成功');
                            this.refreshDict();
                        }
                    });
                }
            });
        },
        add() {
            console.log(this.total)
            if (!this.selectNode.id) {
                this.$Message.warning('请先选择一个字典类别');
                return;
            }
            this.modalType = 0;
            this.modalTitle = '添加字典 ' + this.editTitle + ' 的数据';
            this.$refs.form.resetFields();
            // this.form.sortOrder = this.data.length + 1;
            this.form.sortOrder = this.total?(this.total + 1):0;
            this.form.version = this.currVersion;
            this.modalVisible = true;
            this.dictModalVisible = false;
        },
        sjclaib(v) {
            this.showRight = true;
            this.modalType = 1;
            if (this.editTitle) {
                this.modalTitle = '编辑字典 ' + this.editTitle + ' 的数据';
            } else {
                this.modalTitle = '编辑字典数据';
            }
            this.$refs.form.resetFields();
            // 转换null为""
            for (let attr in v) {
                if (v[attr] == null) {
                    v[attr] = '';
                }
            }
            let str = JSON.stringify(v);
            let data = JSON.parse(str);
            this.form = data;
            this.modalVisible = true;
            this.dictModalVisible = false;
        },
        edit(v) {
            this.modalType = 1;
            if (this.editTitle) {
                this.modalTitle = '编辑字典 ' + this.editTitle + ' 的数据';
            } else {
                this.modalTitle = '编辑字典数据';
            }
            this.$refs.form.resetFields();
            // 转换null为""
            for (let attr in v) {
                if (v[attr] == null) {
                    v[attr] = '';
                }
            }
            let str = JSON.stringify(v);
            let data = JSON.parse(str);
            this.form = data;
            this.modalVisible = true;
        },
        handelSubmitDict() {
            this.$refs.dictForm.validate(valid => {
                console.log(valid, 'valid');
                if (valid) {
                    this.submitLoading = true;
                    if (this.modalType == 0) {
                        // his.$Message.success("操作成功");
                        // this.submitLoading = false;
                        // 添加 避免编辑后传入id等数据 记得删除
                        delete this.dictForm.id;
                        addDict(this.dictForm).then(res => {
                            this.submitLoading = false;
                            if (res.success) {
                                this.$Message.success('操作成功');
                                this.getAllDict();
                                this.dictModalVisible = false;
                            }
                        });
                    } else if (this.modalType == 1) {
                        // 编辑
                        editDict(this.dictForm).then(res => {
                            this.submitLoading = false;
                            if (res.success) {
                                this.$Message.success('操作成功');
                                this.getAllDict();
                                this.dictModalVisible = false;
                            }
                        });
                    }
                }
            });
        },
        handelSubmit() {
            this.$refs.form.validate(valid => {
                if (valid) {
                    this.submitLoading = true;
                    if (this.modalType == 0) {
                        // 添加 避免编辑后传入id等数据 记得删除
                        delete this.form.id;
                        this.form.dictId = this.selectNode.id;
                        addDictData(this.form).then(res => {
                            this.submitLoading = false;
                            if (res.success) {
                                this.$Message.success('操作成功');
                                this.getDataList();
                                this.modalVisible = false;
                            }
                        });
                    } else if (this.modalType == 1) {
                        // 编辑
                        editDictData(this.form).then(res => {
                            this.submitLoading = false;
                            if (res.success) {
                                this.$Message.success('操作成功');
                                this.getDataList();
                                this.modalVisible = false;
                            }
                        });
                    }
                }
            });
        },
        remove(v) {
            this.$Modal.confirm({
                title: '确认删除',
                content: '您确认要删除 ' + v.title + ' ?',
                loading: true,
                onOk: () => {
                    // 删除
                    deleteData({ ids: v.id }).then(res => {
                        this.$Modal.remove();
                        if (res.success) {
                            this.clearSelectAll();
                            this.$Message.success('操作成功');
                            this.getDataList();
                        }
                    });
                }
            });
        },
        delAll() {
            if (this.selectList.length <= 0) {
                this.$Message.warning('您还未选择要删除的数据');
                return;
            }
            this.$Modal.confirm({
                title: '确认删除',
                content: '您确认要删除所选的 ' + this.selectList.length + ' 条数据?',
                loading: true,
                onOk: () => {
                    let ids = '';
                    this.selectList.forEach(function (e) {
                        ids += e.id + ',';
                    });
                    ids = ids.substring(0, ids.length - 1);
                    // 批量删除
                    deleteData({ ids: ids }).then(res => {
                        this.$Modal.remove();
                        if (res.success) {
                            this.$Message.success('操作成功');
                            this.clearSelectAll();
                            this.getDataList();
                        }
                    });
                }
            });
        },
        getVersionListInit() {
            getVersionList().then(res => {
                if (res.success) {
                    this.versionList = res.result;
                    this.currVersion = this.versionList[0];
                }
            });
        },
        onRestWindow() {
            this.columns = this.restTableCellWidth(this.columns_1)
            this.labelWidth70 = this.searchLabelWidth(this.labelWidth70)
            this.labelWidth80 = this.searchLabelWidth(this.labelWidth80)
            this.labelWidth85 = this.searchLabelWidth(this.labelWidth85)
        }
    },
    mounted() {
        this.onRestWindow()
        window.addEventListener('resize',this.onRestWindow)
        // 计算高度
        let height = document.documentElement.clientHeight;
        this.maxHeight = Number(height - 287) + 'px';
        this.init();
    },
    beforeDestroy() {
        window.removeEventListener('resize',this.onRestWindow)
    }
};
</script>
